<template>
<div class="card">
    <!-- 标题 -->
    <div class="card-header">学习计划表</div>
    <!-- 提交 -->
    <div class="card-body">
        <form @submit.prevent="add">
            <div class="row g-4">
                <!-- 科目 -->
                <div class="col-auto">
                    <div class="input-group mb-3">
                        <span class="input-group-text" id="basic-addon1">学习科目</span>
                        <input type="text" class="form-control" placeholder="请输入学习科目" v-model.trim="subject">
                    </div>
                </div>
                <!-- 任务 -->
                <div class="col-auto">
                    <div class="input-group mb-3">
                        <span class="input-group-text" id="basic-addon1">学习内容</span>
                        <textarea class="form-control" v-model.trim="content" placeholder="请输入学习内容" :style="{height:'32px'}"></textarea>
                    </div>
                </div>
                <!-- 地点 -->
                <div class="col-auto">
                    <div class="input-group mb-3">
                        <span class="input-group-text" id="basic-addon1">学习科目</span>

                        <select class="form-select form-select-sm" v-model="seletedOption">

                            <option v-for="option in options" :key="option.placeCode" :value="option.place">{{ option.place }}</option>

                        </select>
                    </div>
                </div>
                <!-- 添加 -->
                <div class="col-auto">
                    <button type="submit" class="btn btn-primary">添加</button>
                </div>
            </div>
        </form>
    </div>
</div>
<table class="table table-striped table-hover table-bordered ">
    <thead>
        <tr>
            <th scope="col">序号</th>
            <th scope="col">学习科目</th>
            <th scope="col">学习内容</th>
            <th scope="col">学习地点</th>
            <th scope="col">状态</th>
            <th scope="col">操作</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="item in list" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.subject }}</td>
            <td>{{ item.content }}</td>
            <td>{{ item.place }}</td>
            <td>
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" role="switch" v-model="item.status" :id="'cd'+item.id">
                    <label class="form-check-label"  v-if="item.status" :for="'cb'+item.id">已完成</label>
                    <label class="form-check-label" v-else :for="'cb'+item.id">未完成</label>
                </div>
            </td>
            <td><a href="javascript:;" @click="remove(item.id,item.status)">删除</a></td>
        </tr>
    </tbody>
</table>
</template>

<script setup>
import {
    ref
} from 'vue'
const list = ref([{
    id: '1',
    subject: 'English',
    content: 'word',
    place: '自习室',
    status: false,
}])
let subject = ref('')
let content = ref('')
let nextId = ref('')
let seletedOption = ref('自习室')
let options = ref([{
        placeCode: 0,
        place: '自习室'
    },
    {
        placeCode: 1,
        place: '图书馆'
    },
    {
        placeCode: 2,
        place: '宿舍'
    },
])
let remove = (id, status) => {
    if (status) {
        list.value = list.value.filter(item => item.id != id)
    } else {
        alert('请先完成学习 ~')
    }
}
let add = () => {
    if (subject.value == '' || content.value == '') {
        alert('请输入学习内容或学习科目')
        return
    }
    nextId.value = Math.max(...list.value.map(item => item.id)) + 1 
    list.value.push({
        id: nextId.value,
        subject: subject.value,
        content: content.value,
        place: seletedOption.value,
        status: false,
    })
    subject.value = ''
    content.value = ''
    seletedOption.value = '自习室'
}
</script>


